<template>
  <div>
    <el-card>
      <!-- 搜索添加区域 -->
      <el-row :gutter="20">
        <!-- 搜索和添加用户 -->
        <el-col :span="7">
          <el-input
            placeholder="请输入内容"
            v-model="input3"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search" @click="searchuser"
              >搜索用户</el-button
            >
          </el-input>
        </el-col>

        <el-col :span="4">
          <el-button type="primary">添加用户</el-button>
        </el-col>
      </el-row>
      <!-- 用户列表 -->

      <el-table :data="userlist" border style="width: 100%">
        <el-table-column type="index" label="id"></el-table-column>

        <el-table-column prop="user_name" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="user_time" label="操作时间" width="180">
        </el-table-column>
        <el-table-column label="用户封禁状态" width="180">
          <template slot-scope="scope">
            <!-- {{ scope.row }} -->
            <el-switch
              v-model="scope.row.user_power"
              @change="changePower(scope.row)"
              active-text="封禁"
              inactive-text="正常"
              active-color="#ff4949"
              inactive-color="#13ce66"
            ></el-switch>
          </template>
        </el-table-column>
        <!-- 查看用户相册 -->
        <el-table-column label="查看相册" width="180" prop="user_id">
          <template slot-scope="scope">
            <!-- {{ scope.row.user_id }} -->
            <i class="el-icon-picture-outline"></i>
          </template>
        </el-table-column>
        <!-- 删除用户 -->
        <el-table-column label="操作" prop="user_id">
          <template slot-scope="scope">
            <!-- {{ scope.row.user_id }} -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="deleteuser(scope.row.user_id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  created() {
    this.getuserList()
  },

  data() {
    return {
      input3: "",
      userlist: [],
      // 用户总条数
      total: "",
    }
  },

  methods: {
    rTime(date) {
      var json_date = new Date(date).toJSON()
      return new Date(new Date(json_date) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "")
    },

    // 删除指定用户
    async deleteuser(user_id) {
      console.log(user_id)

      let a = window.confirm("是否删除该用户")
      if (a == true) {
        const { data: res } = await this.$http.post("admin/deleteuser", {
          user_id: user_id,
        })
        console.log(res)
        this.getuserList()
      } else {
        return
      }
    },

    // 监听switch的变化
    async searchuser() {
      const { data: res } = await this.$http.get("admin/searchuser", {
        params: { user_name: this.input3 },
      })
      console.log(res)
      this.userlist = res.data
    },

    async getuserList() {
      const { data: res } = await this.$http.get("admin/getuser")
      // console.log(res)
      console.log(this.rTime("2022-03-12T05:16:16.000Z"))
      res.status !== 0
        ? this.$message.error("请求数据失败！")
        : (this.userlist = res.data)
      this.userlist.map((item) => {
        item.user_time = this.rTime(item.user_time)
      })
    },
    // 用户状态改变
    async changePower(userinfo) {
      const { data: res } = await this.$http.post("admin/userpower", {
        user_power: userinfo.user_power,
        user_id: userinfo.user_id,
      })
      res.status !== 0
        ? this.$message.error("修改失败")
        : this.$message.success("操作成功!")
      this.getuserList()
    },
  },
}
</script>

<style lang="less" scoped>
.el-icon-picture-outline {
  font-size: 35px;
}
</style>
